<template>
  <div class="top-list">
    <div class="top-text">
      <!-- table标签 -->
      <ul class="top-text-title">
        <li
          :class="titleListNum == k ? 'active' : ''"
          v-for="(i, k) in titleList"
          :key="k"
          @click="handelTitle(k)"
        >
          {{ i }}
        </li>
      </ul>
      <!-- table内容 -->
      <ul class="top-text-content" v-show="titleListNum == 0">
        <li
          v-for="(item, index) in topList"
          :key="index"
          :class="contentIndex == index ? 'content-index' : ''"
          @click="topDetail(item.id, index)"
        >
          <img :src="item.coverImgUrl + '?param=50y50'" :alt="item.name" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <ul class="top-text-content" v-show="titleListNum == 1">
        <li
          v-for="(item, index) in featureList"
          :key="index"
          :class="contentIndex == index ? 'content-index' : ''"
          @click="topDetail(item.id, index)"
        >
          <img :src="item.coverImgUrl + '?param=50y50'" :alt="item.name" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <ul class="top-text-content" v-show="titleListNum == 2">
        <li
          v-for="(item, index) in sceneList"
          :key="index"
          :class="contentIndex == index ? 'content-index' : ''"
          @click="topDetail(item.id, index)"
        >
          <img :src="item.coverImgUrl + '?param=50y50'" :alt="item.name" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="top-body">
      <div class="top-body-header">
        <div class="top-body-header-img">
          <img :src="topBodyDetail.coverImgUrl" />
        </div>
        <div class="top-body-header-detile">
          <p>{{ topBodyDetail.name }}</p>
          <p>{{ topBodyDetail.description }}</p>
          <p>更新时间：{{ createTime }}<span>（刚刚更新）</span></p>
        </div>
      </div>
      <div class="top-body-list">
        <div class="table-title">
          <div class="table-title-left">
            <span>歌曲列表</span>
            <span>{{ topBodyList.length }}首歌</span>
          </div>
          <div class="table-title-right">
            <span
              >播放:&nbsp;<span>{{ topBodyDetail.playCount }}</span
              >&nbsp;次</span
            >
          </div>
        </div>
        <el-table
          :data="topBodyList"
          :row-key="topBodyList.index"
          :stripe="true"
          v-loading="loading"
          element-loading-spinner="el-icon-loading"
          element-loading-text="拼命加载中"
        >
          <el-table-column type="index" > </el-table-column>
          <el-table-column prop="name" label="歌曲" show-overflow-tooltip width="350">
            <template slot-scope="scope">
              <i class="el-icon-video-play"></i>
              <el-link :underline="false" @click="handelplay(scope.row.id)"
                ><span class="songPlay">{{ scope.row.name }}</span></el-link
              >
            </template>
          </el-table-column>
          <el-table-column prop="singer" label="歌手" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-user"></i>
              <span class="songPlay">{{ scope.row.ar[0].name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="timer" label="时长" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span class="songPlay">{{ formatDate(scope.row.dt) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { topListDetail, songListDetail } from "@/api/api";
import { formatDate } from "@/utils/public";
export default {
  name: "topList",
  data() {
    return {
      formatDate:formatDate, // 时间格式化
      titleList: ["TOP榜", "特色榜", "场景榜"],
      titleListNum: 0,
      topList: [],
      featureList: [],
      sceneList: [],
      contentIndex: 0,
      listId: {},
      topBodyDetail: {},
      topBodyList: [],
      createTime: "",
      loading: false,
    };
  },
  mounted() {
    this.getlistDetail();
  },
  methods: {
    handelTitle(k) {
      this.titleListNum = k;
      if (k == 0) {
        this.topDetail(this.topList[0].id);
      } else if (k == 1) {
        this.topDetail(this.featureList[0].id);
      } else {
        this.topDetail(this.sceneList[0].id);
      }
    },
    getlistDetail() {
      topListDetail().then((res) => {
        this.topList = res.data.list.slice(0, 12);
        this.featureList = res.data.list.slice(12, 24);
        this.sceneList = res.data.list.slice(24, 36);
        this.topDetail(this.topList[0].id);
      });
    },
    topDetail(params, index) {
      this.loading = true;
      if (!index) index = 0;
      this.contentIndex = index;
      songListDetail({ id: params }).then((res) => {
        console.log(res);
        this.topBodyDetail = res.data.playlist;
        this.topBodyList = res.data.playlist.tracks;
        console.log(res);
        this.createTime = formatDate(res.data.playlist.updateTime);
        this.loading = false;
      });
    },
    handelplay(v) {
     this.getMusic(v)
    },
  },
};
</script>

<style lang='less' scoped>
.top-list {
  width: 1200px;
  margin: 120px auto 0 auto;
  display: flex;
  justify-content: space-between;

  .top-text {
    width: 300px;
    height: auto;

    .top-text-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      li {
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-family: "hmR";
        color: #a3a3a3;
        text-align: center;
        cursor: pointer;
      }

      .active {
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-family: "hmB";
        color: #444444;
        text-align: center;

        &::after {
          content: "";
          border-bottom: 2px solid rgb(7, 94, 255);
          width: 20px;
          display: block;
          margin: -5px auto;
        }
      }
    }

    .top-text-content {
      width: 300px;
      height: auto;

      .content-index {
        width: 300px;
        height: 50px;
        margin-bottom: 10px;
        background-color: #6b8ef669;
      }

      li {
        width: 300px;
        height: 50px;
        margin-bottom: 10px;
        display: flex;
        cursor: pointer;
        &:hover {
          background-color: #bbbbbb69;
        }

        img {
          width: 50px;
          height: 50px;
        }

        span {
          height: 50px;
          margin-left: 20px;
          display: inline-block;
          line-height: 50px;
          font-size: 14px;
          font-family: "hmR";
          color: #444444;
        }
      }
    }
  }

  .top-body {
    width: 870px;
    .top-body-header {
      display: flex;
      .top-body-header-img {
        display: inline-block;
        border: 1px solid #6b6b6b36;
        border-radius: 5px;
        img {
          width: 150px;
          height: 150px;
          margin: 5px;
        }
      }
      .top-body-header-detile {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        width: 100%;
        height: 110px;
        p {
          margin: 5px;
          font-family: "hmR";
          color: #6b6b6b;
          font-size: 14px;
        }
        p:nth-child(1) {
          font-size: 30px;
          font-family: "hmB";
          color: #444444;
          margin: 5px;
          text-overflow: ellipsis;
          display: -webkit-box;
          /*重新定义-webkit私有盒模型*/
          -webkit-box-orient: vertical;
          /*内容之间的排列顺序，vertical垂直方向排列*/
          -webkit-line-clamp: 2;
          /*在第几行末尾显示省略号...*/
          word-break: break-all;
        }
      }
    }
    .top-body-list {
      width: 100%;
      height: auto;
      margin-top: 20px;
      .table-title {
        margin: 5px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .table-title-left {
          span:nth-child(1) {
            font-size: 24px;
            font-family: "hmB";
            color: #444444;
            margin-right: 10px;
          }
          span {
            font-size: 14px;
            font-family: "hmR";
            color: #6b6b6b;
          }
        }
        .table-title-right {
          span {
            font-size: 14px;
            font-family: "hmR";
            color: #6b6b6b;
            span {
              color: rgb(7, 94, 255);
              font-size: 14px;
            }
          }
        }
      }
      .el-table {
          font-family: "hmR";

          .template .songPlay {
            color: #6b6b6b;
          }

          i {
            font-size: 14px;
            margin-right: 5px;
          }

          .iconfont {
            font-size: 14px !important;
          }
        }
    }
  }
}
</style>